<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../CSS/tree.css" type="text/css" rel="stylesheet" />
</head>

<body>
<script language="javascript" src="../JS/DOM.js"></script>
<script language="javascript" src="../JS/TreeNode.js"></script>
<script>
var a0 = new TreeNode("a0");

var b0 = new TreeNode("b00", a0); 
var b1 = new TreeNode("b01", a0);
var b2 = new TreeNode("b02", a0);
var b3 = new TreeNode("b03", a0);

var c0 = new TreeNode("c000", b0);
var c1 = new TreeNode("c001", b0);
var c2 = new TreeNode("c002", b0);

var d0 = new TreeNode("d020", b2);
var d1 = new TreeNode("d021", b2);
var d2 = new TreeNode("d022", b2);

var e0 = new TreeNode("e0010", c1); 
var e1 = new TreeNode("e0011", c1); 

var kindergartenIndex = 2;
function basicTag(node) {
	var element =  Node("div", new Array());
	var mark = Node("a", new Array("class", "rowLeaf"));
	if(node.children.length > 0) {
		mark.setAttribute("class", "rowExpand");
		mark.setAttribute("onclick", "expandOrNot(this);");
	}
	var text = Node("span", new Array(), node.value);
	var kindergarten = Node("div", new Array("style", "padding-left: 20px;"));
	appendNodes(element, new Array(mark, text, kindergarten));
	return element;
}

function expandOrNot(tag) {
	var t = tag.parentNode.children[kindergartenIndex].style;
	if(t.display == "none") {
		t.display = "block";
		tag.className = "rowExpand";
	} else {
		t.display = "none";
		tag.className = "row";
	}
}

var x = Node("div", new Array(), a0.value);
var t = new Tree(a0, x, kindergartenIndex, basicTag);
//var t = new Tree(a0, x);
</script>
<input type="button" onclick="t.show();" value="Show tree" />
<script language="javascript">
document.body.appendChild(x);
</script>
</body>
</html>
